<template>
  <div class="scene">
    <div class="block">
      <span v-show="show1" class="span1 word">某年某月的某一天<br/>你终于回到学校<br/>爸妈给你一千二的生活费<br/>临走前跟你说了一句<br/>“要省着花啊”<br/></span>
      <span v-show="show1" class="span2 word">咕~忙活了一上午<br/>你的肚子已经在抗议啦<br/>你拿着饭卡去饭堂吃饭<br/>并充了三百块进饭卡</span>
      <span v-show="show1" class="span3 word">吃饭的时候你顺便打开了某宝<br/>看了看前几天看中的衣服<br/>新学期怎么能没有新衣服穿呢<br/>你又下单了</span>
      <span v-show="show1" class="span4 word">回到宿舍之后<br/>发现其他小伙伴也回来了<br/>你们决定好好聚聚<br/>便约好了出去吃顿好的</span>
      <span v-show="show1" class="span5 word">你们一起去吃火锅<br/>路过电影院时<br/>看见有部电影上映<br/>你抵不住室友的软磨硬泡<br/>一起去贡献票房了</span>
      <span v-show="show1" class="span6 word">你打开手机<br/>社团群已经99+<br/>原来他们在讨论去哪聚餐<br/>你看了看你的钱包<br/>但也不好意思拒绝</span>
      <span v-show="show1" class="span7 word">你就和他们一起去了<br/>吃了烧烤<br/>还喝了奶茶</span>
      <span v-show="show1" class="span8 word">聚会结束后你叹了口气<br/>看了看你并不富裕的钱包<br/>数了数下次发生活费的日子<br/>“这个月还是能撑过去的”</span>
      <span v-show="show1" class="span9 word">宿舍内突然传来一片哀叹<br/>原来是要交书本费<br/>整整四百块!!!</span>
      <span v-show="show1" class="span10 word">手中只剩下130块<br/>不知道过几天会不会有其他活动<br/>这时的你会选择</span>
      <el-button v-show="show2" class="button" v-on:click="A">A 打个电话给家里吧</el-button>
      <el-button v-show="show2" class="button" v-on:click="B">B 去支付软件看一下吧</el-button>
      <el-button v-show="show2" class="button" v-on:click="C">C 先不要想了去刷朋友圈</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data : function() {
    return {
      show1: true,
      show2: false,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      setTimeout(() => {this.show1 = false}, 30000)
      setTimeout(() => {this.show2 = true}, 30000)
    },
    A() {
      this.$router.push("/learn/scene1-2")
    },
    B() {
      this.$router.push("/learn/scene1-3")
    },
    C() {
      this.$router.push("/learn/scene1-4")
    },
  }
}
</script>

<style scoped>
.scene{
  width: 100%;
  min-height: 666px;
}

.block{
  width: 1080px;
  height: 607.5px;
  top: 30px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: black;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.button {
  height: 60px;
  margin-top: 270px;
  margin-left: 50px;
  font-size: 25px;
  font-weight: bold;
  color: rgba(249, 191, 75, 1);
  background: rgba(53, 78, 102, 1);
}

.word {
  font-size: 50px;
  font-weight: bold;
  color: rgba(249, 191, 75, 0);
  position: absolute;
  width: 1080px;
  left: 50%;
  transform: translate(-50%, 0%);
  animation-duration: 3s;
  animation-name: move1;
}

.span1{
  top: 120px;
}

.span2{
  top: 150px;
  animation-delay: 3s;
}

.span3{
  top: 150px;
  animation-delay: 6s;
}

.span4{
  top: 150px;
  animation-delay: 9s;
}

.span5{
  top: 120px;
  animation-delay: 12s;
}

.span6{
  top: 120px;
  animation-delay: 15s;
}

.span7{
  top: 180px;
  animation-delay: 18s;
}

.span8{
  top: 150px;
  animation-delay: 21s;
}

.span9{
  top: 180px;
  animation-delay: 24s;
}

.span10{
  top: 180px;
  animation-delay: 27s;
}

@keyframes move1 {
  0% {
    color: rgba(249, 191, 75, 0);
  }
  50% {
    color: rgba(249, 191, 75, 1);
  }
  80% {
    color: rgba(249, 191, 75, 1);
  }
  100% {
    color: rgba(249, 191, 75, 0);
  }
}
</style>